<template>
  <div class="win">
    <div class="left">
      <div>

        <el-popover placement="top-start" :width="200" trigger="hover">
          <template #reference>
            <div class="left_box">
              <img class="icon" :src="user.value && user.value.avatar" :alt="user.name">
            </div>
          </template>
          <div>
            <span class="user_title">昵称：</span>
            <span class="user_value">{{user.value?user.value.name:''}}</span>
            <br>
            <span class="user_title">在线状态：</span>
            <span class="online_color">在线</span>
            <br>
            <span class="user_title">用户名：</span>
            <span class="user_value">{{user.value?user.value.userName:''}}</span>
            <br>
          </div>
        </el-popover>
        <div class="left_box" @click="select(1)">
          <img v-if="icon.select_icon ===1" class="icon" src="@/assets/img/select_msg.png">
          <img v-else class="icon" src="@/assets/img/msg.png">
        </div>
        <div class="left_box"  @click="select(2)">
          <img v-if="icon.select_icon ===2" class="icon" src="@/assets/img/select_friend.png">
          <img v-else class="icon" src="@/assets/img/friend.png">
        </div>
      </div>
      <div class="left_box" @click="handleLogout">
        <img class="icon" src="@/assets/img/exit.png">
      </div>
    </div>
    <router-view></router-view>
    <div @click="handleLogout" class="close">
      <span>&times;</span>
    </div>
  </div>
</template>

<script setup>
import {useRoute, useRouter} from "vue-router";
import {nextTick, onMounted, reactive, ref} from "vue";

import socketSend, {wsClose} from "@/util/socket.js";
import {getUser, logout} from "@/api/login/index.js";
import { wxIcon} from "@/store/icon.js";
import {notice, noticeToDuration} from "@/util/playMsgNitific.js";
import {msgStore} from "@/store/msg.js";
let router = useRouter();
let route = useRoute();
let store = msgStore()
let user = reactive({})

//收到消息监听，带开发
store.$subscribe((mutation,state)=>{
  let msgObj = state.msg
  if (msgObj && msgObj.type===9){
    noticeToDuration('warning',msgObj.message,"下线通知",-1)
  }
})

function handleLogout() {
  logout().then(res=>{
    notice('success',"退出登录成功")
    localStorage.removeItem("wx_token")
    router.push("/")
  });
  // 处理退出登录
  wsClose()
}

let icon = wxIcon()

function select(select){
  icon.select_icon = select
  if (select===1){
    // 跳转最近会话
    router.push("/wx/chat")
  }else {
    // 跳转好友列表
    router.push("/wx/user")
  }
}

function getUserInfo(){
  getUser().then(res=>{
    user.value = res.data.data
    // 登录逻辑
    socketSend({"uid":res.data.data.id,"type":1})
  })
}

onMounted(()=>{
  if (route.path.indexOf('user')>-1){
    icon.select_icon = 2
  }else {
    icon.select_icon = 1
  }
  getUserInfo()
})

</script>

<style lang="less" scoped>
.win {
  max-width: 1000px;
  position: relative;
  display: flex;
  width: 70%;
  min-height: 600px;
  min-width: 700px;
  height: 75%;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 0 57px #b7b7b7;
}

.left {
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  color: #fff;
  display: flex;
  width: 60px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #e6e0df;
}

.close {
  position: absolute;
  right: 10px;
  cursor: pointer;
  span{
    font-size: 33px;
    font-weight: 200;
  }
}
.user_title{
  font-weight: 700;
}

.online_color{
  color: #2ed937;
}

.user_value{
  color: #a2a2a2;
}

.close:hover{
  color: #ce8176;
}

.left_box {
  margin: 20px 0;
  width: 100%;
  cursor: pointer;
}

.icon {
  width: 60%;
  border-radius: 5px;
}

.msg_left {
  word-break:break-all;
  position: relative;
  max-width: 75%;
  min-height: 20px;
  padding: 8px;
  text-align: start;
  margin-left: 15px;
  border-radius: 10px;
  background: #ebebeb;
  clear: both
}
.msg_left:before {
  position: absolute;
  top: 6px;
  left: -20px;
  padding: 0;
  border: 10px solid;
  border-color: transparent #ebebeb transparent transparent;
  display: block;
  content: '';
  z-index: 9;
}



</style>